<template>
    <div class="link-page">
        <div id="mescroll" class="mescroll mescroll-wrap" v-mescroll="{up:'upCallback',size:page.pageSize,num:page.pageNo}">
            <div class="mescroll-bounce">
                <div class="wrapper">
                    <div class="author-subscrib">
                        <router-link class="go-subscrib" :to="{name:'authorList'}">
                            <div class="img-box">+</div>
                            <div class="text-box">关注</div>
                        </router-link>
                        <router-link class="go-subscrib" v-if = 'authorList[0]' :to="{name:'author',params:{autId:authorList[0].id,autype:page.adminType}}" >
                            <img class="img-box" v-if = 'authorList[0]' :src="this.$store.state.picHead+authorList[0].hostLogo" alt="">
                            <div class="text-box omit" v-if = 'authorList[0]'>{{authorList[0].hostCompany}}</div>
                        </router-link>
                        <router-link class="go-subscrib" v-if = 'authorList[1]' :to="{name:'author',params:{autId:authorList[1].id,autype:page.adminType}}">
                            <img class="img-box" v-if="authorList[1]" :src="this.$store.state.picHead+authorList[1].hostLogo" alt="">
                            <div class="text-box omit" v-if="authorList[1]">{{authorList[1].hostCompany}}</div>
                        </router-link>
                        <router-link class="go-subscrib" v-if = 'authorList[2]' :to="{name:'author',params:{autId:authorList[2].id,autype:page.adminType}}">
                            <img class="img-box" v-if="authorList[2]" :src="this.$store.state.picHead+authorList[2].hostLogo" alt="">
                            <div class="text-box omit" v-if="authorList[2]">{{authorList[2].hostCompany}}</div>
                        </router-link>
                        <router-link class="go-subscrib" v-if = 'authorList[3]' :to="{name:'author',params:{autId:authorList[3].id,autype:page.adminType}}">
                            <img class="img-box" v-if="authorList[3]" :src="this.$store.state.picHead+authorList[3].hostLogo" alt="">
                            <div class="text-box omit" v-if="authorList[3]">{{authorList[3].hostCompany}}</div>
                        </router-link>
                    </div>

                    <div class="select-title">
                        <div class="author" :class="{'active':page.adminType*1===1}" @click="change(1)">作者</div>
                        <div class="publisher" :class="{'active':page.adminType*1===2}" @click="change(2)">主办方</div>
                    </div>
                    <div class="author-list" v-for="item in subList">
                        <author-item :author='item' :autype="page.adminType" class="out-item"></author-item>
                    </div>
                    <div  class="empty" v-if="page.total*1===0">
                        <img class="empty-img" src="../../assets/image/empty.png" alt="">
                        <div class="text-line">还没有任何关注</div>
                    </div>
                </div>
            </div>
        </div>
        <z-footer></z-footer>
    </div>
</template>

<script>
    import {appService} from '../../service/appService'
    import {authorService} from '../../service/authorService'
    import authorItem from '../../component/list/author.vue'

    export default {
        components: {'author-item': authorItem},
        metaInfo () {
            // console.log(this);
            const title = '关注'
            return {
                title,
                meta: [
                    { vmid: 'description', name: 'description', content: '运联' },
                    { vmid: 'keyWords', name: 'keyWords', content: '运联首页' },
                ]
            }
        },
        data () {
            return {
                count: 1,page:{pageNo: 1, pageSize: 10, adminType: 1,type:1,total:1},subList:[]
            }
        },
        asyncData({store, route}) {
            let page = {pageNo: 1, pageSize: 4, adminType: 1}
            function getauthorList() {
                return authorService.authorList(page).then(function (res) {
                    // console.log(res.data.datas);
                    store.state.homeStore.authorList = res.data.datas.datas
                })
            }

            return Promise.all([
               getauthorList()
            ])

        },
        computed: {
            //将存在store中的数据取出
            authorList: {
                get: function () {
                    return this.$store.state.homeStore.authorList || []
                },
                set: function (newValue) {
                    return newValue
                }
            },
        },
        mounted: function () {
            let that = this
            if(appService.checkLogin()){
                that.getauthorList()
            }else{
                that.page.total = 0
                // console.log(that.page.total);
            }
//            that.getbanners()
            /*
             * 微信分享设置
             * */
            appService.getWxJssdk().then(function () {
                appService.getWxShare({hasGet:true},'关注列表')
            })
        },
        methods: {
            //搜索，带关键字跳转搜索页
            /*search:function (v) {
             let that = this
             that.$router.replace({name:'search',params:{type:1,query:v}})
             },*/
            //获取文章列表
            getauthorList: function () {
                let that = this
                let store = that.$store
                authorService.subList(that.page).then(function (res) {
                    if (!res.data || !res.data.datas) return
                    let list = res.data.datas.datas
                    if (that.page.pageNo * 1 === 1) {
                        that.subList = res.data.datas.datas
                    } else {
                        for (let i in list) {
                            that.subList.push(list[i])
                        }
                    }
//                    that.articleList = that.$store.state.homeStore.articleList
                    that.page.pageNo += 1
                    that.page.total = res.data.datas.totalPage
                    // console.log(that.page.total);
                    that.mescroll.endSuccess(list.length);
                })
            },
            //上拉
            upCallback: function () {
                let that = this
                that.getauthorList()
            },
            //上拉
            change: function (v) {
                let that = this
                that.page.adminType = v
                that.page.pageNo = 1
                if(appService.checkLogin()){
                    that.getauthorList()
                }else{
                    that.page.total = 0
                }
            },
        },
        watch: {},
    }
</script>

<style lang="less">
    @import url("../../assets/css/mescroll.min.css");

    .link-page .mescroll-wrap {
        bottom: 1.2rem !important;
        background:#f8f8f8;
        .out-item{
            padding-bottom:.4rem;
            border-bottom:1px solid #f0f0f0;
            background:#fff;
            padding-right:.4rem;
            .head-img{
                border-radius:0;
            }
        }
        .select-title{
            width:100%;
            display:flex;
            background:#fff;
            .author,.publisher{
                flex:1;
                text-align:center;
                line-height:1.2rem;
                font-size: .426rem;
                color: #333333;
                box-shadow: inset 0 -1px 0 0 rgba(221,221,221,0.50);
            }
            .active{
                border-bottom:1px solid #20A0FF;
                color:#20A0FF;
            }
        }
        .empty {
            text-align:  center;
            .empty-img {
                height: 140px;
                margin-top: 100px;
            }
            .text-line{
                text-align:  center;
                padding-top:20px;
                font-size: 15px;
                color: #999999;
                letter-spacing: 1.25px;
            }
        }

        .author-subscrib{
            padding:15px;
            margin-bottom:10px;
            background:#fff;
            overflow: hidden;
            display: flex;
            .go-subscrib{
                flex:1;
                .img-box {
                    height: 1.4667rem;
                    width: 1.4667rem;
                    color: #20A0FF;
                    background: rgba(32, 160, 255, .1);
                    font-size: .933rem;
                    text-align: center;
                    line-height: 1.4rem;
                    display: inline-block;
                }
                .text-box{
                    width: 1.4667rem;
                    text-align:center;
                    padding-top:5px;
                    font-size:13px;
                }
            }


        }
    }

</style>
